<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String basepath = request.getContextPath(); %>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" >
	<title>家谱</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-material-design.min.css">
	<link rel="stylesheet" type="text/css" href="css/ripples.min.css">
	<link rel="stylesheet" type="text/css" href="css/css.css">
	<script type="text/javascript">
		var basepath = '<%=basepath%>';
	</script>
</head>
<body>

<div id="inputmodel" class="row">
	<h1 style="margin-top:30px;">输入关系</h1>
	<div class="getra">
		<div class="form-group label-placeholder">
            <label for="i5p" class="control-label">name</label>
            <input type="email" class="form-control" id="nameO">
            <span class="help-block hide"><code>请先输入姓名...</code></span>
        </div>

		<a href="javascript:void(0)" class="btn btn-default">是<div class="ripple-container"></div></a>
		
		<div class="form-group label-placeholder">
            <label for="i5p" class="control-label">name</label>
            <input type="email" class="form-control" id="nameT">
            <span class="help-block hide"><code>请先输入姓名...</code></span>
        </div>

		<div class="form-group">
			<select id="selectRelation" class="form-control">
				<option value="-1">请选择关系</option>
				<option value="0">配偶</option>
				<option value="1">子女</option>
				<%--<option value="2">儿子</option>--%>
				<%--<option value="3">女儿</option>--%>
			</select>
               
              <span class="material-input"></span>
        </div>

        <a href="javascript:void(0)" id="confirm" class="btn btn-raised btn-primary">确定<div class="ripple-container"></div></a>
	</div>

	<div class="bs-docs-section">
	    <div class="row">
	      <div class="col-md-12">
	        <div class="page-header">
	          <h1 id="tables">生成关系组</h1>
	        </div>

	        <div class="bs-component">
	          <table class="table table-striped table-hover ">
	            <thead>
	            <tr>
	              <th>#</th>
	              <th>名字</th>
	              <th>关系</th>
	              <th>名字</th>
	              <th>善后</th>
	            </tr>
	            </thead>
	            <tbody id="tbodyRelation">
	            
	            </tbody>
	          </table>
	        <div id="source-button" class="btn btn-primary btn-xs" style="display: none;">&lt; &gt;</div></div><!-- /example -->
	      </div>
	    </div>
	</div>
</div>
<br><br>


<!-- focus model -->
<div id="inputfocusname" style="display:none" class="row">
	补充信息：
	<br><hr>
	<table class="table table-hover ">
		<tbody id="focusTable">
			<tr>
	    		<td width="10%">关键人物：</td>
	    		<td><input type="text" id="compl_person" /></td>
	    		<td><label id="mapStatus"></label></td>
	    		<td></td>
	    	</tr>
	    	<tr>
	    		<td>出生地:</td>
	    		<td><input type="text" id="focus_pro" value="省份" /></td>
	    		<td><input type="text" id="focus_city" value="城市" /></td>
	    		<td><input type="text" id="focus_county" value="区县" /></td>
	    	</tr>	
	    	<tr>
	    		<td>出生日期：</td>
	    		<td colspan="3"><input type="text"  id="focus_birth" value="yyyy/mm/dd"></td>
	    	</tr>
	    	<tr>
	    		<td>描述：</td>
	    		<td colspan="3" ><input style="width:80%" type="text" id="com_desc" /></td>
	    	</tr>
	    	<tr>
	    		<td>祖上名人：</td>
	    		<td colspan="2" ><input style="width:90%" type="text" id="com_ances" /></td>
	    		<td><label>用分号;隔开</label></td>
	    	</tr>
	    </tbody>	
   </table>
</div>



<br><br><br>
<div id="match2jiapu" style="display:none" class="row">
	<table class="table table-striped table-hover">
		<thead>
			<tr>
				<th>所有人物</th>
				<th>涉及家谱</th>
			</tr>
		</thead>
		<tbody id="tbodyPerson">
		            
		</tbody>
	</table>
	<br>
	<div id="sub_result">
	</div>
</div>

<div>
<table>
	<tr>
		<td><a href="javascript:void(0)" id="nexttest" onclick="next()" class="btn btn-raised btn-primary">下一步</a></td>
		<td><a href="javascript:void(0)" id="secondStep" onclick="last()" style="display:none" class="btn btn-raised btn-primary">上一步</a></td>
		<td><a href="javascript:void(0)" id="thirdStep" onclick="last2()" style="display:none" class="btn btn-raised btn-primary">回到首页重置</a></td>
		<td><a href="javascript:void(0)" id="focusPerson" onclick="match()" style="display:none" class="btn btn-raised btn-primary">再下一步<div class="ripple-container"></div></a></td>
		<td><a href="javascript:void(0)" id="submitRes" onclick="submitValues()" style="display:none" class="btn btn-raised btn-primary">提交<div class="ripple-container"></div></a></td>
	</tr>
</table>
</div>


<!--bootstrap-->  
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/material.min.js"></script>
<script type="text/javascript" src="js/ripples.min.js"></script>
<!--d3-->
<script src="js/d3.v3.min.js"></script>

<script src="js/deal.js"></script>
<script>

function next(){
	var a=document.getElementById("nexttest");
	a.style.display="none";
	
	var input=document.getElementById("inputmodel");
	input.style.display="none";
	
	
	var focus=document.getElementById("inputfocusname");
	focus.style.display="block";
	
	var focusButton=document.getElementById("focusPerson");
	focusButton.style.display="block";
	
	var secondStep=document.getElementById("secondStep");
	secondStep.style.display="block";
	
	
	document.getElementById('compl_person').value=people[1];	 
	
	//match到百科
	if(people[1]!=null){
		$.post( 	
				basepath+"/relation/mapBaike",
				{"name": people[1]},
		   	     function(data){
					
		   	    	if(data==null||data==''){
		   	    		document.getElementById('com_desc').value='未被匹配到百度百科';	
		   	    		
		   	    	} else{
		   	    		document.getElementById('mapStatus').innerHTML='已被匹配到百度百科（已补充到描述）!';
		   	    		document.getElementById('com_desc').value=data;
		   	    	}
		   	     }
		); 
	}
}

function last(){
	var a=document.getElementById("nexttest");
	a.style.display="block";
	
	var input=document.getElementById("inputmodel");
	input.style.display="block";
	
	
	var focus=document.getElementById("inputfocusname");
	focus.style.display="none";
	
	var focusButton=document.getElementById("focusPerson");
	focusButton.style.display="none";
	
	var secondStep=document.getElementById("secondStep");
	secondStep.style.display="none";
}


function last2(){
	 window.location.reload();
}

function match(){
	var focus=document.getElementById("inputfocusname");
	focus.style.display="none";
	
	var match2jiapu=document.getElementById("match2jiapu");
	match2jiapu.style.display="block";
	
	var focusButton=document.getElementById("focusPerson");
	focusButton.style.display="none";
	
	var secondStep=document.getElementById("secondStep");
	secondStep.style.display="none";
	
	var submitRes=document.getElementById("submitRes");
	submitRes.style.display="block";
	
	var thirdStep=document.getElementById("thirdStep");
	thirdStep.style.display="block";
	
	var prov=document.getElementById("focus_pro").value;
	var city=document.getElementById("focus_city").value;
	var county=document.getElementById("focus_county").value;
	var persons = document.getElementById("com_ances").value;
	
	$.post( 	
			basepath+"/relation/mapName",
			{"name":people[1],"prov":prov,"city":city,"county":county,"persons":persons},
	   	     function(data){				
					if(data=='0'){
		   	    		$("#tbodyPerson").append("<tr><td>"+$("#nameT").val()+"</td><td><input style='width:90%' type='text' value='没有搜索到推荐的家谱' id='des"+$("#nameT").val()+"'></td></tr>");
		   	    	} else{
		   	    		//alert(data);
		   	    		data = eval("("+data+")");
    					for(var i = 0;i<data.length;i++){
                            var name = data[i].split("--");
    						if(i==0){
    							$("#tbodyPerson").append("<tr><td>"+$("#nameT").val()+"</td><td>" +
                                    "<input type='checkbox' name='selectedwork' value='"+name[0]+"' /> Mapped to: <a target='_blank' href=\"http://jp.library.sh.cn/jp/service/work/list#uri=" + name[0] + "\">" + name[1] + "</a>" +
                                    "</td></tr>");
    						}else{
    							$("#tbodyPerson").append("<tr><td></td><td>" +
                                    "<input type='checkbox' name='selectedwork' value='"+name[0]+"' /> Mapped to: <a target='_blank' href=\"http://jp.library.sh.cn/jp/service/work/list#uri=" + name[0] + "\">" + name[1] + "</a>" +
                                    "</td></tr>");
    						}			
    					}	
		   	    	}
					//other persons
					for(var j=0;j<people.length;j++){
						if(j==1)continue;
						$("#tbodyPerson").append("<tr><td>"+people[j]+"</td><td></td></tr>");
					}
		   	     
			}
	);
}

function submitValues(){
	var childs = $("#tbodyRelation").children();
	var triple = new Array();
	for(var i = 0;i<childs.length;i++){
		var sub = $(childs[i]).children(":eq(1)").html();
		var pro = $(childs[i]).children(":eq(2)").html();
		var obj = $(childs[i]).children(":eq(3)").html();
		
		triple[i] = sub+";;"+pro+";;"+obj;
	}
	
	//related works 被选中的家谱
	var relatedWorks = new Array();
	var obj=document.getElementsByName('selectedwork');
	for(var i=0; i<obj.length; i++){    
		if(obj[i].checked) {
			relatedWorks.push(obj[i].value);
		}
	} 
	
	var childs = $("#tbodyPerson").children();
	var desc = new Array(); 
	for(var i = 0;i<childs.length;i++){
		var sub = $(childs[i]).children(":eq(0)").html();
		var des = $("#des"+sub).val();	//description
		
		if(sub!=null&&sub.trim().length>0) desc.push(sub + ";;" + des);
		//1. sub , desc, literal
		//2. sub, birth, literal (date)
		//3. sub, shl:relatedWork, literal
	}
	$.post( 	
			"<%=basepath%>/relation/addRelation",
	   	     {"triples":triple,"descs":desc,"relatedWorks":relatedWorks},
	   	     function(data){
	   	    	 if(data==null||data==''){
	   	    		document.getElementById('sub_result').innerHTML='maybe failed to update :(';
	   	    	 }else{
	   	    		document.getElementById('sub_result').innerHTML=data;
	   	    	 }
	   	    }
	    );
}
</script>

</body>
</html>